import React, { useEffect, useState } from "react";
import { Form, Input, Button, Row, Col, Skeleton } from "antd";
import useCloseLoadingOnMount from "../../../utils/hook/useCloseLoadingOnMount";
import ComponentHeader from "../../../components/Page/ComponentHeader";
import businesssApi from "../../../apis/businesssApi";
import { promptResult2 } from "../../../utils/common";
import { useParams } from "react-router-dom";

const BusinessEdit = () => {
  useCloseLoadingOnMount();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(true);
  const [business, setBusiness] = useState({});
  const [lodingBtn, setLoadingBtn] = useState(false);
  const params = useParams();

  const onFinish = async (values) => {
    promptResult2(
      businesssApi.updateBusinesss({ ...values, id: params.id }),
      setLoadingBtn
    );
  };

  useEffect(() => {
    const fetchData = async () => {
      const res = await businesssApi.getBusinesssDetail(params.id);
      if (res.status >= 0) {
        setBusiness({ ...res.data, name: res.data.name2 });
      }
      setLoading(false);
    };
    fetchData();
  }, []);

  useEffect(() => {
    if (!loading) {
      form.setFieldsValue(business);
    }
  }, [business]);

  return (
    <>
      {loading ? (
        <Skeleton active paragraph={{ rows: 10 }} />
      ) : (
        <div className="body-container1">
          <ComponentHeader title="商家编辑" marginBottom />
          <Form
            form={form}
            layout="vertical"
            onFinish={onFinish}
            initialValues={{
              isActive: true,
            }}
          >
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  label="店铺名称"
                  name="name"
                  rules={[{ required: true, message: "请输入店铺名称" }]}
                >
                  <Input placeholder="请输入店铺名称" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="店主姓名"
                  name="managerName"
                  rules={[{ required: true, message: "请输入店主姓名" }]}
                >
                  <Input placeholder="请输入店主姓名" />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  label="微信号"
                  name="openId"
                  rules={[{ required: true, message: "请输入微信号" }]}
                >
                  <Input placeholder="请输入微信号" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="电话"
                  name="phone"
                  rules={[
                    { required: true, message: "请输入电话" },
                    { min: 11, max: 11, message: "电话号码应该为11位" },
                  ]}
                >
                  <Input placeholder="请输入电话" maxLength={11} />
                </Form.Item>
              </Col>
            </Row>

            <Row gutter={24}>
              <Col span={12}>
                <Form.Item label="密码重置" name="password">
                  <Input.Password placeholder="请输入密码重置(可选)" />
                </Form.Item>
              </Col>
              <Col span={12}></Col>
            </Row>

            <Form.Item>
              <Button
                type="primary"
                loading={lodingBtn}
                htmlType="submit"
                style={{ width: 120 }}
              >
                提交
              </Button>
            </Form.Item>
          </Form>
        </div>
      )}
    </>
  );
};

export default BusinessEdit;
